<template>
  <view class="edit-nickname-layout">
		<my-header title="修改昵称"></my-header>
    <my-content class="content">
      <input class="nickname item-bg" v-model="nickname" placeholder="请输入昵称" />
			<view style="flex: 1;"></view>
      <view class="submit btn-primary" @click="submit()">保存</view>
    </my-content>
  </view>
</template>

<script>
import api from '../../api/index.js'
export default {
  data() {
    return {
      userData: {},
      nickname: '',
    }
  },
  onLoad(option) {
    this.nickname = option.nickname
    // this.getUser()
  },
  onShow() {},

  methods: {
    getUser() {
      uni.showLoading({
        title: '数据加载中',
      })
      api.users
        .show()
        .then((res) => {
          if (res.code === 200) {
            uni.hideLoading()
            this.userData = res.data
            this.nickname = this.userData.nickname
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    submit() {
      if (!this.nickname) {
        this.show('请输入昵称')
        return
      }
      let name = this.nickname.replace(/^\s\s*/, '').replace(/\s\s*$/, '')
      if (!name) {
        this.show('昵称中不得包含空格')
        return
      }
      if (name.length < 3) {
        this.show('昵称至少3个字符且不包含空格')
        return
      }
      uni.showLoading({
        title: '资料提交中',
      })
      api.users
        .update({ nickname: this.nickname })
        .then((res) => {
          uni.hideLoading()
          if (res.code === 200) {
            this.show('修改成功')
            setTimeout(() => {
              uni.navigateBack()
            }, 1000)
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
}
</script>

<style>
.edit-nickname-layout {
  height: 100vh;
}
.content {
  background: url('https://www.dingxians.cn/upload/images/common/bg.png');
  background-size: 100% 100%;
  height: 100vh;
	display: flex;
	flex-direction: column;
}
.nickname {
  background-color: #1f1f1f;
  height: 90rpx;
  line-height: 90rpx;
  padding: 0 20rpx;
	width: 670rpx;
	margin: 30rpx auto;
	box-sizing: border-box;
	color: white;
	font-size: 32rpx;
}
.submit {
  width: 610rpx;
  margin: 20rpx auto;
  height: 84rpx;
  line-height: 84rpx;
  text-align: center;
  color: #fff;
}
</style>
